<template>
  <div class="con">
    <div class="contbox6_10">
      <div class="titlelist6_10">活动管理 / 伙伴拉新 </div>
      <div class="content">
         <div class="relus">
          活动配置说明：普通代理拓展下级代理的拉新活动，直邀下级的新增商户数和新增商户的交易额达到规则要求后给与奖励
          <img @click="relues" src="../../assets/images/sm.png" />
        </div>
        <div class="jibenInfo">伙伴代理商拉新奖励</div>
        <div class="target">
          <div class="list">
            <div class="name">活动名称</div>
            <el-input
              v-model="form.activeName"
              :disabled="disabled"
              placeholder="请输入活动名称"
              maxlength="30"
              style="width:300px"
            ></el-input>
          </div>
          <!-- <div class="list">
            <div class="name">参与对象</div>
            <el-select
              :disabled="type == '0'"
              v-model="form.objectType"
              @change="pinChange"
              placeholder="请选择"
              style="width: 278px"
            >
              <el-option
                v-for="item in objectType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="list" v-if="form.objectType == '1'">
            <div class="name">选择团队</div>
            <el-cascader
              @remove-tag="delTag"
              ref="cascaderAddr"
              v-model="form.officeUids"
              :disabled="type == '0'"
              :options="options"
              :props="{ multiple: true, checkStrictly: true, emitPath: false }"
              clearable
            ></el-cascader>
          </div> -->
          <div class="list">
            <div class="name">考核时间</div>
            <el-date-picker
              @change="shijian"
              :picker-options="pickerOptions"
              :disabled="disabled"
              v-model="kaoTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width:300px"
              type="daterange"
              :default-time="['00:00:00', '23:59:59']"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
          <div class="list">
            <div class="name">奖励发放时间</div>
            <el-date-picker
              :disabled="disabled"
              value-format="yyyy-MM-dd"
              v-model="form.rewardDate"
              type="date"
              placeholder="选择日期"
              style="width:300px !important"
            ></el-date-picker>
          </div>
        </div>
        <div class="jibenInfo">目标设置值</div>
        <div class="targetSet">
          <div
            class="targetSet"
            v-for="(item, index) in form.promotionNewPartnerList"
            :key="index"
          >
            <div class="list sk">
              <div class="name">直邀下级</div>
              <div class="zhi">
                <el-input
                 @input="value=>{item.minCnt=value.replace(/[^\d]+/g,'')}"
                  :disabled="disabled"
                  v-model="item.minCnt"
                  maxlength="6"
                  placeholder="伙伴数量"
                ></el-input
                >&nbsp;-&nbsp;
                <el-input
                @input="value=>{item.maxCnt=value.replace(/[^\d]+/g,'')}"
                  :disabled="disabled"
                  v-model="item.maxCnt"
                  maxlength="6"
                  placeholder="伙伴数量"
                ></el-input> 人
              </div>
            </div>
            <div class="list">
              <div class="name">单个直邀下级新增商户</div>
              <el-input
                :disabled="disabled"
                v-model="item.secondCnt"
                maxlength="6"
                 @input="value=>{item.secondCnt=value.replace(/[^\d]+/g,'')}"
                style="width:130px"
                placeholder=""
              ></el-input>
              人
            </div>
            <div class="list">
              <div class="name">每个商户至少交易</div>
              <el-input
                :disabled="disabled"
                v-model="item.merchantRewardAmt"
                maxlength="10"
                 @input="value=>{item.merchantRewardAmt=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')}"
                style="width:130px"
                placeholder=""
              ></el-input>
              元
            </div>
            <!-- <div class="list">
              <div class="name">最少付款金额</div>
              <el-input
                :disabled="disabled"
                maxlength="10"
                v-model="item.totalAmt"
                style="width:130px"
                placeholder=""
              ></el-input
              >元（选填）
            </div> -->
            <div class="list">
              <div class="name">则奖励参与者</div>
              <el-input
                :disabled="disabled"
                v-model="item.rewardAmt"
                maxlength="10"
                 @input="value=>{item.rewardAmt=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')}"
                style="width:130px"
                placeholder=""
              ></el-input>
              元
              <el-button
                :disabled="disabled"
                type="primary"
                
                style="margin-left:20px"
                @click="addSection"
                v-if="index == 0"
                >添加奖励区间</el-button
              >
              <span
                v-if="
                  index == form.promotionNewPartnerList.length - 1 &&
                    index != 0 &&
                    disabled == false
                "
                class="delList"
                @click="detail(index)"
              >
                <img src="../../assets/images/del.png" alt=""
              /></span>
            </div>
          </div>
        </div>
        <div class="btnGroup">
          <el-button type="primary" @click="bank">下一步</el-button>
          <el-button @click="banks">取消</el-button>
          <!-- <button @click="dian">点击</button> -->
        </div>
      </div>
    </div>
    <el-dialog
      title="规则说明"
      :visible.sync="dialogVisible3"
      width="800px"
      :before-close="handleClose"
    >
      <el-row>
        <el-form label-width="100px">
          <el-form-item label="活动说明：">普通代理拓展下级代理的拉新活动，直邀下级的新增商户数和新增商户的交易额达到规则要求后给与奖励。</el-form-item>
          <el-form-item label="考核时间：">考核时间是活动总时间;普通代理参与活动有效期起止时间。</el-form-item>
          <el-form-item label="奖励规则：">满足直邀下级人数，每个直邀下级的新增商户数，每个新增商户交易额达到规则要求，则参与活动的普通代理获取奖励金额。<br/>如设置多个规则，单个普通代理如都完成规则，按照最高等级的奖励，只奖励一次</el-form-item>
          <el-form-item label="奖励方式：">统一结算，指定日期入账</el-form-item>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible3 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Littlehow } from "../../assets/js/util";
import axios from "axios";
import https from '../../plugins/https';
export default {
  data() {
    return {
      dialogVisible3:false,
      objectType: [
        { label: "个人", value: "0" },
        { label: "团队", value: "1" }
      ],
      names: "",
      kaoTime: [], //考核时间周期
      disabled: false,
      options: [],
      //提交的内容
      form: {
        activeName: "", //活动名称
        promotionNewPartnerList: [{}],
        rewardDate: "",
        objectType: "",
        officeUids: []
        // kaoTimeStart: "", //考核周期开始时间
        // kaoTimeEnd: "", //考核周期结束时间
        // rewardTimer: "", //奖励发放时间
        // participate: "", //参与品牌
        // brandType: "", //品牌类型
        // model: "", //商品型号
        // merchants: "", //商户激活时间
        // noActive: "", //非活跃时间
        // noActiveStart: "", //非活跃时间开始
        // noActiveEnd: "", //非活跃时间结束
        // turnoverSamll: "", //收单交易额小于
        // userNumSmall: "", //促活交易数量 小
        // userNumBig: "", //促活交易数量  大
        // minimumMoney: "", //最低交易金额
        // transactionsNum: "", //最低交易笔数
        // rewardMoney: "", //奖励金额
        // cuUserSmall: "", //促活商户前  目标的
        // cuUserBigger: "", //促活商户  后  目标的
        // smallMoney: "", //最低交易金额  目标的
        // smallMoneyNum: "", //最低交易笔数 目标的
        // rewardMoneyTarget: "" //奖励金额 目标的
      },
      // 目标
      targetUser: [
        // // 促活商户数量a,b
        // {
        //   cuNuma: "", //商户数量
        //   cuNumb: "", //商户数量
        //   smallMoney: "", //最低交易金额
        //   smallMoneyNum: "", //最低交易笔数
        //   rewardMoneyTarget: "" //奖励金额
        // }
      ],
      // 时间选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() //如果没有后面的-8.64e6就是不可以选择今天的
        }
      },
      value1: "",
      //   考核结束
      rewardTimer: "", //奖励发放时间
      //   参与活动品牌
      participateArr: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      participate: "",
      // 品牌类型
      brandTypeS: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      brandType: "",
      // 商品型号
      modelGroup: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      model: "",
      type: ""
    };
  },
  activated(){
   
    this.disNo = this.$route.query.isSshow;
    if (this.$route.query.user == 1) {
      this.disabled = true;
    } else {
      this.disabled = false;
    }
    if(this.$route.query.bools){
      this.kaoTime=[]
      this.form= {
        activeName: "", //活动名称
        promotionNewPartnerList: [{}],
        rewardDate: "",
        objectType: "",
        officeUids: []
      }
    }
    if (this.$route.query.activeUid) {
      let _this = this;
      axios
        .post("/api/active/queryUpdateActive", {
          activeUid: this.$route.query.activeUid
        })
        .then(res => {
          if(res.data.code=="0000"){
            _this.tableData = res.data.data;
          this.form = res.data.data;
          var arr = [];
          arr.push(res.data.data.startDate);
          arr.push(res.data.data.endDate);
          this.kaoTime=arr
          }else{
            this.kaoTime=[]
            this.form= {
              activeName: "", //活动名称
              promotionNewPartnerList: [{}],
              rewardDate: "",
              objectType: "",
              officeUids: []
            }
          }
          
        })
        .catch(err => {
        });
    } else {
      this.form.objectType = "0";
    }
  },
  created() {
    if (this.$route.query.type == 0) {
      this.names = "编辑活动";
    } else if (this.$route.query.type == 1) {
      this.names = "活动详情";
    } else {
      this.names = "创建活动";
    }
    if (this.$route.query.user == 1) {
      this.disabled = true;
    } else {
      this.disabled = false;
    }
    this.type = this.$route.query.type;
    https.getAllOfficeLista({})
      .then(res => {
        console.log(res.data.data);
        let datas = res.data.data;
        datas.map(item => {
          item.label = item.name;
          item.value = item.uid;
        });
        var format = {
          id: "uid", //菜单编号，作为树形查找id
          root: "", //顶层节点的parentId是root
          pid: "parentUid", //父节点标识字段为parentId
          child: "children", //构造出的树形子节点数组名为children
          sort: { field: "sortNo", direct: 1 }
        }; //排序字段为sortNo，且正序
        console.log(Littlehow.tree.format(datas, format));
        console.log(111);
        var result = Littlehow.tree.format(datas, format);
        this.options = result;
        console.log(this.options);
      })
      .catch(err => {
      });
    // if (this.$route.query.activeUid) {
    //   let _this = this;

    //   axios
    //     .post("/api/active/queryUpdateActive", {
    //       activeUid: this.$route.query.activeUid
    //     })
    //     .then(res => {
    //       _this.tableData = res.data.data;
    //       this.form = res.data.data;
    //       this.kaoTime.push(res.data.data.startDate);
    //       this.kaoTime.push(res.data.data.endDate);
    //     })
    //     .catch(err => {});
    // } else {
    //   this.form.objectType = "0";
    // }
  },
  methods: {
    relues() {
      this.dialogVisible3 = true;
    },
    shijian(val) {
      this.form.startDate = val[0];
      this.form.endDate = val[1];
    },
    // 删除
    detail(num) {
      this.form.promotionNewPartnerList.splice(num, 1);
      this.num--;
    },
    // 添加
    addSection() {
      this.form.promotionNewPartnerList.push({
        minCnt: "", //商户数量
        maxCnt: "", //商户数量
        totalAmt: "", //最低交易金额
        merchantRewardAmt: "", //最低交易笔数
        secondCnt: "", //奖励金额
        rewardAmt: ""
      });
    },
    // detail(num) {
    //   this.targetUser.splice(num, 1);
    // },
    banks() {
      this.$router.push({
        path: "activityManagement"
      });
    },
    bank() {
      console.log(this.form);
      if (this.form.endDate >= this.form.rewardDate) {
        return layer.open({
          content: "奖励发放时间要在活动时间之后",
          skin: "msg",
          time: 2
        });
        // return this.$notify({
        //   title: "错误",
        //   message: ,
        //   type: "error"
        // });
      }
      if (this.form.activeName == "")
        return layer.open({
          content: "活动名称不能未空",
          skin: "msg",
          time: 2
        });
        // return this.$notify({
        //   title: "错误",
        //   message: ,
        //   type: "error"
        // });
      if (this.kaoTime.length < 2)
      return layer.open({
          content: "考核时间不能未空",
          skin: "msg",
          time: 2
        });
        // return this.$notify({
        //   title: "错误",
        //   message: ,
        //   type: "error"
        // });
      if (this.form.rewardDate == "")
      return layer.open({
          content: "奖励发放时间不能未空",
          skin: "msg",
          time: 2
        });
        // return this.$notify({
        //   title: "错误",
        //   message: ,
        //   type: "error"
        // });
      for (let a = 0; a < this.form.promotionNewPartnerList.length; a++) {
        if (
          this.form.promotionNewPartnerList[a].minCnt !=
            Number(this.form.promotionNewPartnerList[a].minCnt) ||
          this.form.promotionNewPartnerList[a].maxCnt !=
            Number(this.form.promotionNewPartnerList[a].maxCnt)
        )
          return layer.open({
          content: "直邀下级数量不能未空",
          skin: "msg",
          time: 2
        });
          // return this.$notify({
          //   title: "错误",
          //   message: ,
          //   type: "error"
          // });
        if (this.form.promotionNewPartnerList[a].merchantRewardAmt == 0)
        return layer.open({
          content: "交易金额不能为0",
          skin: "msg",
          time: 2
        });
          // return this.$notify({
          //   title: "错误",
          //   message: ,
          //   type: "error"
          // });
      }
      this.$store.commit("clearSetActiveRanking");
      this.$store.commit("clearSetBannerData");
      this.$store.commit("clearSetBingImg");
      for (let i = 0; i < this.form.promotionNewPartnerList.length; i++) {
        // this.form.promotionNewPartnerList[i].minCnt = Number(
        //   this.form.promotionNewPartnerList[i].minCnt
        // );
        // this.form.promotionNewPartnerList[i].maxCnt = Number(
        //   this.form.promotionNewPartnerList[i].maxCnt
        // );
        // this.form.promotionNewPartnerList[i].merchantRewardAmt = Number(
        //   this.form.promotionNewPartnerList[i].merchantRewardAmt
        // );
        // this.form.promotionNewPartnerList[i].secondCnt = Number(
        //   this.form.promotionNewPartnerList[i].secondCnt
        // );
        this.form.promotionNewPartnerList[
          i
        ].rewardAmt = this.form.promotionNewPartnerList[i].rewardAmt;
      }
      this.$store.commit("setActiveRanking", this.form);
      // return
      this.$router.push({
        path: "nextActive",
        query: {
          uid: this.$route.query.activeUid,
          type: "savePromotionNewPartner",
          user: this.$route.query.user,
          name:"frindsestablish"
        }
      });
      // this.$router.push({
      //   path: "nextstep",
      //   name: "nextstep",
      //   query: {}
      // });
    }
  }
};
</script>

<style scoped>
.con {
  position: relative;
}
/deep/ .el-input__inner {
  width: 130px;
}
.wrap {
  width: 96%;
  margin: 0 auto;
}
.listWrap {
  display: flex;
  flex-wrap: wrap;
}
.list {
  display: flex;
  align-items: center;
  /* width: 33.3333%; */
  /* width: 450px; */
  /* width: 38%; */
  margin-bottom: 20px;
}
.lists {
  display: flex;
  align-items: center;
}
.name {
  /* width: 100px; */
  text-align: right;
  margin-right: 10px;
  margin-left: 30px;
}
.topTitle {
  font-size: 16px !important;
  /* font-weight: bold; */
  margin-bottom: 20px;
  margin-top: 40px;
}
.subTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}
.target {
  display: flex;
  flex-wrap: wrap;
  float: left;
}
.target .list {
  /* width: 33.3333%; */
  justify-content: left;
}
.queryMerchants {
  height: 60px;
  margin-top: 15px;
  margin-bottom: 30px;
  line-height: 60px;
  text-indent: 20px;
  background: #f5f7fa;
}
.zhi {
  display: flex;
  align-items: center;
}
.targetSet {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  float: left;
}
.targetSet .list {
  /* width: 50%; */
  display: flex;
  /* width:100% */
}
/deep/ .target .list .el-input__inner {
  /* width: 50%; */
  width: 300px;
}
.delList {
  cursor: pointer;
  margin-left: 20px
}
.btnGroup {
  margin-top: 30px;
  float: left;
  /* width: 100%; */
  margin-top: 50px;
  margin-left: 40%;
  margin-bottom: 20px
}
/deep/ .el-range-separator {
  width: 50px;
}
/deep/ .sk .el-input__inner {
  width: 150px;
}
.targetsUser {
  font-size: 16px;
  color: #303133;
}
/deep/ .targetSet .list {
  /* width: 38%; */
  display: flex;
}
.subTitle {
  font-size: 16px;
  color: #303133;
}
/deep/ .sk .el-input {
  width: 100px;
}
/deep/ .sk .el-input__inner {
  width: 100px;
}
/* 单独样式 */
.contbox6_10 {
  width: 100%;
  /* margin-left: 2%; */
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.jibenInfo {
  width: calc(100% - 40px);
  margin: 0 20px 20px;
  height: 40px;
  line-height: 40px;
  float: left;
  font-size: 18px;
}
.relus {
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding-left: 20px;
  background: #f9f4f7;
  /* color: #fb932b; */
}
</style>
